<template>
	<view class="content">
		<h2>amis sdk , use renderjs</h2>
		<p> (script标签上 lang="renderjs"，仅app与h5支持)</p>
		
		
		  <!--  json是个名字，可以随意改，注意:change:[name]这两个名字需要相同就行了  -->
		        <!-- 从service层到renderjs：首先在template中绑定一个service中定义的值，然后在同样的位置增加:change:(属性名)=(renderjs的module名.触发的方法)来实现通信。
		简单来说就是service负责数据的更改，通过template监听数据的变化来通知renderjs 
		            this.$ownerInstance.callMethod方法必须通过点击事件执行-->
		 
		    <!-- msg是要向renderjs发送的数据，testRenderjs 为renderjs模块名称，onChange是renderjs中的监听方法 -->
		    
		<div :json="amisJSON" :change:json="amisRenderModule.onJsonChange" ref="amis-container"></div>
	</view>
</template>

<script >
	export default {
		data() {
			return {
				amisJSON: null,
				}
		},
		
		methods:{
			amisReady(e){//有视图层调用
				
				this.amisJSON={
					type: 'page',
					title: '表单页面',
					body: {
						type: 'form',
						mode: 'horizontal',
						api: '/saveForm',
						body: [{
								label: 'Name',
								type: 'input-text',
								name: 'name'
							},
							{
								label: 'react-info-card',
								type: 'react-info-card'
							}
						]
					}
				}
			}
		
		}
	}
</script>

<script module="amisRenderModule" lang="renderjs">
	export default {
		
		
		mounted() {
			 
			var _this = this;
			if (window.amis) {
				_this.$ownerInstance.callMethod('amisReady');
			} else {
				var headTarget = document.getElementsByTagName('head')[0]
				console.log("loading css");
				var cssArr = ['static/amis/sdk.css', 'static/amis-render-widgets.css']
				for (var i in cssArr) {
					var path = cssArr[i];
					const css = document.createElement('link')
					css.rel = 'stylesheet'
					css.type = 'text/css'
					css.href = path
					headTarget.appendChild(css);
				}


				console.log("begin loading sdk");
				//加载amis sdk.js
				const hm = document.createElement('script')
				hm.type = 'text/javascript'
				hm.src = "static/amis/sdk.js";
				headTarget.appendChild(hm)
				hm.onload = function(res) {
					//加载widgets
					console.log("sdk load ok , begin loading widgets");
					const widgetHm = document.createElement('script')
					widgetHm.type = 'text/javascript'
					widgetHm.src = "static/amis-render-widgets.js";
					// widgetHm.src = "http://192.168.2.175:1024/index.js";
					headTarget.appendChild(widgetHm)
					widgetHm.onload = function() {
						console.log("widgets load ok");
					 //触发amis-load
						window.amis_inited = true; 
						_this.$ownerInstance.callMethod('amisReady');
						
					}


				}
			}

		},
		methods: {
			
			onJsonChange:function(newValue, oldValue, ownerInstance, instance) {
				if( typeof(oldValue)  =='undefined' ) oldValue = null;
				if(oldValue ==newValue) return;
				  console.log('service层中的json发生变化,load amis')
				// console.log('新值newValue', newValue)
				// console.log('旧值oldValue', oldValue)
				// ownerInstance和this.$ownerInstance一样，可用来向service层通信     
				// instance和ownerInstance的区别是：       
				// instance.$el指向的是触发事件的那个节点；ownerInstance.$el指向当前vue文件中的根节点；    
				// instance的作用目前尚不明确，官方没有给出用法 
				
				this.loadAmis(newValue);
			},
			 
			loadAmis: function(json) {
				var container = this.$refs["amis-container"]; 

				let amis = amisRequire('amis/embed');
				// 通过替换下面这个配置来生成不同页面

				let amisScoped = amis.embed(container, json);
			}
		}
	}
</script>
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
